<template>
  <div class="container">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="设置信息"></el-step>
      <el-step title="选择题目"></el-step>
      <el-step title="确认信息"></el-step>
    </el-steps>

    <div style="margin-top: 100px" v-if="active === 0">
      <el-row>
        <el-col :span="10" :offset="6">
          <el-form ref="firstform" :model="paper" label-width="120px" :rules="rules">
            <el-form-item label="所属考试：" prop="fkExamName">
              <el-select
              :disabled="!isSelect"
                v-model="paper.fkExamName"
                filterable
                placeholder="请输入考试名称"
                style="width: 360px"
              >
                <el-option v-for="item in exams" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
              <p v-if="!isSelect" style="font-size:5px;height:8px;color:#e6a23c">&nbsp;&nbsp;&nbsp;<i class="fa fa-question-circle" aria-hidden="true"></i>&nbsp;题目已选列表不为空，清空后方可重新选择</p>
            </el-form-item>
            <el-form-item label="试卷名：" prop="paperName">
              <el-input
                type="text"
                v-model="paper.paperName"
                style="width: 360px"
              ></el-input>
            </el-form-item>
            <el-form-item label="试卷标识：" prop="mark">
              <el-input type="text" v-model="paper.mark" style="width: 360px"></el-input>
            </el-form-item>
            <el-form-item label="备注：" prop="remarks">
              <el-input
                type="text"
                v-model="paper.remarks"
                style="width: 360px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div v-else-if="active === 1">
      <el-row>
        <el-col :span="12">
          <div class="item-title">待选题库</div>
          <el-row style="margin: 0px 0px 5px 10px">
            <el-col>
              <el-select
                v-model="queryQuestion.type"
                placeholder="请选择"
                style="width: 100px"
              >
                <el-option label="所有类型" value=""></el-option>
                <el-option
                  v-for="item in types"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-input
                type="text"
                style="width: 330px; margin: 0 5px"
                placeholder="请输入题目详情"
                v-model="queryQuestion.titleDetail"
                @keyup.enter.native="filterQuestion"
              ></el-input>
              <el-tooltip
                class="item"
                effect="dark"
                content="清空"
                placement="bottom-start"
              >
                <el-button
                  type="info"
                  size="small"
                  plain
                  icon="fa fa-times fa-lg"
                  style="
                    border: 1px solid;
                    border-radius: 25px;
                    width: 25px;
                    padding: 9px 21px 9px 9px;
                  "
                  @click="clearQuery"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="搜索"
                placement="bottom-start"
                style="margin-left: 5px"
              >
                <el-button
                  type="primary"
                  size="small"
                  plain
                  icon="fa fa-search fa-lg"
                  style="
                    border: 1px solid;
                    border-radius: 25px;
                    width: 25px;
                    padding: 9px 21px 9px 9px;
                  "
                  @click="filterQuestion"
                ></el-button>
              </el-tooltip>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <div class="item-title">已选择</div>
          <div class="item-title">
            单选共 {{ checkedInfo.totalRadio }} 道，多选共
            {{ checkedInfo.totalMutil }} 道，判断共 {{ checkedInfo.totalTrue }} 道，简答共
            {{ checkedInfo.totalShort }} 道；总分：{{ checkedInfo.totalScore }}
          </div>
        </el-col>
      </el-row>
      <div class="drag-box">
        <div class="drag-box-item">
          <draggable
            v-model="filterQuestions"
            @remove="removeHandle"
            :move="checkMove"
            v-bind="dragOptions"
            v-loading='isLoadingLeft'
          >
            <transition-group tag="div" id="todo" class="item-ul" >
              <div
                class="drag-list"
                v-for="item in filterQuestions"
                :key="'question' + item.id"
              >
                <el-popover
                  placement="top-start"
                  width="650"
                  trigger="click"
                  :offset="100"
                  @show="openPopover(item.id)"
                >
                  <el-row>
                    <el-col>
                      <el-tag size="mini">题目:</el-tag>&nbsp;{{
                        item.titleDetail
                      }} </el-col
                    ><el-col style="margin-top: 5px">
                      <div
                        v-if="
                          item.type === 'RADIO_QUESTION' ||
                          item.type === 'MULTI_SELECT_QUESTION'
                        "
                      >
                        <div
                          v-for="(select, index2) in JSON.parse(item.selectionList)"
                          :class="[
                            checkSelect(select, item) === true
                              ? 'select_currect'
                              : 'select_error',
                          ]"
                          :key="select"
                        >
                          <span
                            >{{ "选项" + String.fromCharCode(65 + index2) + "：" + select
                            }}<br
                          /></span>
                        </div>
                      </div>
                      <div
                        v-if="item.type === 'TRUE_FALSE_QUESTION'"
                        style="margin: 3px 0"
                      >
                        <el-tag type="warning" size="mini" style="margin-right: 5px"
                          >答案</el-tag
                        >
                        <el-radio :value="item.answer" label="TRUE_CHOICE"
                          ><el-tag type="success" size="mini">正确</el-tag></el-radio
                        >
                        <el-radio :value="item.answer" label="FALSE_CHOICE"
                          ><el-tag type="danger" size="mini">错误</el-tag></el-radio
                        >
                      </div>
                      <div
                        v-if="item.type === 'SHORT_ANSWER_QUESTION'"
                        style="margin: 3px 0"
                      >
                        <el-tag type="warning" size="mini" style="margin-right: 5px"
                          >答案</el-tag
                        >{{ item.answer }}
                      </div>
                    </el-col>
                    <el-col style="margin-top: 5px">
                      <div
                        v-if="
                          item.remarks !== null &&
                          item.remarks !== undefined &&
                          item.remarks !== ''
                        "
                      >
                        <el-tag type="info" size="mini" style="margin-right: 5px"
                          >备注</el-tag
                        >{{ item.remarks }}
                      </div>
                    </el-col>
                    <el-col style="margin-top: 5px">
                      <div
                        v-if="
                          item.imgList !== null &&
                          item.imgList !== undefined &&
                          item.imgList !== ''
                        "
                      >
                        <el-tag
                          type="info"
                          size="mini"
                          style="margin-right: 5px; vertical-align: top"
                          >图片</el-tag
                        >
                        <el-tooltip
                          v-for="(img, index3) in changeImgList(item.imgList)"
                          :key="index3"
                          class="tooltips"
                          effect="dark"
                          content="点我查看大图"
                          placement="bottom-end"
                        >
                          <el-image
                            :name="'showImage-' + item.id"
                            :src="changeImgList(item.imgList)[index3]"
                            :preview-src-list="changeImgList(item.imgList)"
                            class="quest_img"
                          ></el-image>
                        </el-tooltip>
                      </div>
                    </el-col>
                  </el-row>
                  <div slot="reference">
                    <el-row>
                      <el-col>
                        <el-tag size="mini" v-if="item.type === 'RADIO_QUESTION'"
                          >单选</el-tag
                        >
                        <el-tag
                          type="info"
                          size="mini"
                          v-else-if="item.type === 'SHORT_ANSWER_QUESTION'"
                          >简答</el-tag
                        >
                        <el-tag
                          type="success"
                          size="mini"
                          v-else-if="item.type === 'MULTI_SELECT_QUESTION'"
                          >多选</el-tag
                        >
                        <el-tag
                          type="warning"
                          size="mini"
                          v-else-if="item.type === 'TRUE_FALSE_QUESTION'"
                          >判断</el-tag
                        >
                        <el-tag class="scorespan" size="mini">{{
                          item.score + "分"
                        }}</el-tag>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <div class="showinline">
                          {{ "&nbsp;题目：" + item.titleDetail }}
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-popover>
              </div>
            </transition-group>
          </draggable>
        </div>
        <div class="drag-box-item">
          <draggable
            v-model="checkedQuestions"
            @remove="removeHandle"
            :move="checkMove"
            v-bind="dragOptions"
            v-loading='isLoadingRight'
          >
            <transition-group tag="div" id="done" class="item-ul">
              <div
                class="drag-list"
                v-for="item in checkedQuestions"
                :key="'question' + item.id"
              >
                <el-popover
                  placement="top-start"
                  width="650"
                  trigger="click"
                  :offset="100"
                  @show="openPopover(item.id)"
                >
                  <el-row>
                    <el-col>
                      <el-tag size="mini">题目:</el-tag>&nbsp;{{
                        item.titleDetail
                      }} </el-col
                    ><el-col style="margin-top: 5px">
                      <div
                        v-if="
                          item.type === 'RADIO_QUESTION' ||
                          item.type === 'MULTI_SELECT_QUESTION'
                        "
                      >
                        <div
                          v-for="(select, index2) in JSON.parse(item.selectionList)"
                          :class="[
                            checkSelect(select, item) === true
                              ? 'select_currect'
                              : 'select_error',
                          ]"
                          :key="select"
                        >
                          <span
                            >{{ "选项" + String.fromCharCode(65 + index2) + "：" + select
                            }}<br
                          /></span>
                        </div>
                      </div>
                      <div
                        v-if="item.type === 'TRUE_FALSE_QUESTION'"
                        style="margin: 3px 0"
                      >
                        <el-tag type="warning" size="mini" style="margin-right: 5px"
                          >答案</el-tag
                        >
                        <el-radio :value="item.answer" label="TRUE_CHOICE"
                          ><el-tag type="success" size="mini">正确</el-tag></el-radio
                        >
                        <el-radio :value="item.answer" label="FALSE_CHOICE"
                          ><el-tag type="danger" size="mini">错误</el-tag></el-radio
                        >
                      </div>
                      <div
                        v-if="item.type === 'SHORT_ANSWER_QUESTION'"
                        style="margin: 3px 0"
                      >
                        <el-tag type="warning" size="mini" style="margin-right: 5px"
                          >答案</el-tag
                        >{{ item.answer }}
                      </div>
                    </el-col>
                    <el-col style="margin-top: 5px">
                      <div
                        v-if="
                          item.remarks !== null &&
                          item.remarks !== undefined &&
                          item.remarks !== ''
                        "
                      >
                        <el-tag type="info" size="mini" style="margin-right: 5px"
                          >备注</el-tag
                        >{{ item.remarks }}
                      </div>
                    </el-col>
                    <el-col style="margin-top: 5px">
                      <div
                        v-if="
                          item.imgList !== null &&
                          item.imgList !== undefined &&
                          item.imgList !== ''
                        "
                      >
                        <el-tag
                          type="info"
                          size="mini"
                          style="margin-right: 5px; vertical-align: top"
                          >图片</el-tag
                        >
                        <el-tooltip
                          v-for="(img, index3) in changeImgList(item.imgList)"
                          :key="index3"
                          class="tooltips"
                          effect="dark"
                          content="点我查看大图"
                          placement="bottom-end"
                        >
                          <el-image
                            :name="'showImage-' + item.id"
                            :src="changeImgList(item.imgList)[index3]"
                            :preview-src-list="changeImgList(item.imgList)"
                            class="quest_img"
                          ></el-image>
                        </el-tooltip>
                      </div>
                    </el-col>
                  </el-row>
                  <div slot="reference">
                    <el-row>
                      <el-col>
                        <el-tag size="mini" v-if="item.type === 'RADIO_QUESTION'"
                          >单选</el-tag
                        >
                        <el-tag
                          type="info"
                          size="mini"
                          v-else-if="item.type === 'SHORT_ANSWER_QUESTION'"
                          >简答</el-tag
                        >
                        <el-tag
                          type="success"
                          size="mini"
                          v-else-if="item.type === 'MULTI_SELECT_QUESTION'"
                          >多选</el-tag
                        >
                        <el-tag
                          type="warning"
                          size="mini"
                          v-else-if="item.type === 'TRUE_FALSE_QUESTION'"
                          >判断</el-tag
                        >
                        <el-tag class="scorespan" size="mini">{{
                          item.score + "分"
                        }}</el-tag>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <div class="showinline">
                          {{ "&nbsp;题目：" + item.titleDetail }}
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-popover>
              </div>
            </transition-group>
          </draggable>
        </div>
      </div>
    </div>
    <div v-else-if="active === 2" style="margin-top: 60px">
      <el-row>
        <el-col :span="10" :offset="7">
            <span class="third_label"> 所属考试：</span>
            <span class="third_item" :title="paper.fkExamName">{{paper.fkExamName}}</span>
        </el-col>
        <el-col :span="10" :offset="7">
            <span class="third_label"> 试卷名：</span>
            <span class="third_item" :title="paper.paperName">{{paper.paperName}}</span>
        </el-col>
        <el-col :span="10" :offset="7">
          <span class="third_label"> 试卷总分：</span>
            <span class="third_item"><el-tag style="font-size:18px">{{checkedInfo.totalScore}}</el-tag></span>
        </el-col>
        <el-col :span="10" :offset="7">
            <span class="third_label"> 试卷标识：</span>
            <span class="third_item">{{paper.mark}}</span>
            <el-button type="info" plain size="mini" icon="el-icon-view"  style="padding: 2px 5px;height:22px;margin-left:30px" @click="viewPaper">预览</el-button>
        </el-col>
        <el-col :span="10" :offset="7">
          <span class="third_label">单选题共<el-tag class="third_tag" type="success">{{checkedInfo.totalRadio}}</el-tag>题，共<el-tag class="third_tag">{{checkedInfo.radioScore}}</el-tag>分，占比如下:</span>
            <el-progress :percentage="parseFloat(((checkedInfo.radioScore / checkedInfo.totalScore) * 100).toFixed(1))" color="#42b983"></el-progress>
            <span class="third_label">多选题共<el-tag class="third_tag" type="success">{{checkedInfo.totalMutil}}</el-tag>题，共<el-tag class="third_tag">{{checkedInfo.mutilScore}}</el-tag>分，占比如下:</span>
            <el-progress :percentage="parseFloat(((checkedInfo.mutilScore / checkedInfo.totalScore) * 100).toFixed(1))" color="#f1e05a"></el-progress>
            <span class="third_label">判断题共<el-tag class="third_tag" type="success">{{checkedInfo.totalTrue}}</el-tag>题，共<el-tag class="third_tag">{{checkedInfo.trueScore}}</el-tag>分，占比如下:</span>
            <el-progress :percentage="parseFloat(((checkedInfo.trueScore / checkedInfo.totalScore) * 100).toFixed(1))"></el-progress>
            <span class="third_label">简答题共<el-tag class="third_tag" type="success">{{checkedInfo.totalShort}}</el-tag>题，共<el-tag class="third_tag">{{checkedInfo.shortScore}}</el-tag>分，占比如下:</span>
            <el-progress :percentage="parseFloat(((checkedInfo.shortScore / checkedInfo.totalScore) * 100).toFixed(1))" color="#E6A23C"></el-progress>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 60px">
      <div>
        <div v-if="active === 0" style="margin-left: 507px">
          <i
            class="fa fa-arrow-circle-o-right fa-3x myhover"
            title="下一步"
            @click="checkFirst"
          ></i>
        </div>
        <div v-else-if="active === 1" style="margin-left: 479px">
          <i
            class="fa fa-arrow-circle-o-left fa-3x myhover"
            title="上一步"
            @click="before"
            style="margin-right: 10px"
          ></i>
          <i
            class="fa fa-arrow-circle-o-right fa-3x myhover"
            title="下一步"
            @click="checkSecond"
            style="margin-left: 10px"
          ></i>
        </div>
        <div v-else-if="active === 2" style="margin-left: 479px">
          <i
            class="fa fa-arrow-circle-o-left fa-3x myhover"
            title="上一步"
            @click="before"
            style="margin-right: 10px"
          ></i>
          <i
            class="fa fa-check-circle-o fa-3x myhover"
            style="margin-left: 10px"
            title="提交"
            @click="checkData"
          ></i>
        </div>
      </div>
    </div>
    <el-dialog
      title="预览试卷"
      :append-to-body="true"
      :visible.sync="showVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1152px"
      top='5vh'
    >
    <show-paper ref="viewpaper" :allQuestions="JSON.parse(JSON.stringify(checkedQuestions))"></show-paper>
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import Constants from "../../utils/Constant.js";
import ShowPaper from './ShowPaper.vue';

var _this;
export default {
  components: {
    draggable,
    ShowPaper,
  },
  props: ["exams"],
  data() {
    return {
      showVisible: false,
      //步骤index
      active: 0,
      //题库
      allQuestions: [],
      //待选题库
      filterQuestions: [],
      //已选列表
      checkedQuestions: [],
      // 试卷
      paper: {
        id: 0,
        fkExamName: "",
        paperName: "",
        mark: "",
        remarks: "",
      },
      // 验证
      rules: {
        fkExamName: [{ required: true, message: "请选择所属考试！", trigger: "blur" }],
        paperName: [{ required: true, message: "请输入试卷名！", trigger: "blur" }],
        mark: [{ required: true, message: "请输入试卷标识！", trigger: "blur" }],
      },
      // 待选题库过滤条件
      queryQuestion: {
        type: "",
        titleDetail: "",
      },
      // 已选列表 综合信息显示
      checkedInfo: {
        totalScore: 0,
        radioScore: 0,
        totalRadio: 0,
        mutilScore: 0,
        totalMutil: 0,
        shortScore: 0,
        totalShort: 0,
        trueScore: 0,
        totalTrue: 0,
      },
      isLoadingLeft: false,
      isLoadingRight: false,
      isSelect: true,
      types: Constants.QuestionType.list,
      dragOptions: {
        animation: 120,
        scroll: true,
        group: "sortlist",
        ghostClass: "ghost-style",
      },
      todo: [],
      doing: [],
    };
  },
  methods: {
    // 下一步
    next() {
      this.active++;
    },
    // 上一步
    before() {
      this.active--;
    },
    //获取题目
    getQuestion() {
      if (this.paper.fkExamName === '' || this.paper.fkExamName === null ||this.paper.fkExamName === undefined) {
        return;
      }
      this.$post("/question/queryall", { examName: this.paper.fkExamName }).then(
        (res) => {
          if (res.code === 0) {
            this.allQuestions = res.data;
            this.filterQuestions = JSON.parse(JSON.stringify(res.data));
            if (_this.checkedQuestions.length > 0) {
              _this.updateInit()
            }
          } else {
            this.$message.error("题库初始化失败");
            console.log("题库初始化失败");
          }
        }
      );
    },
    //清空输入框
    clearQuery() {
      this.queryQuestion.titleDetail = "";
      this.filterQuestion();
    },
    //过滤题目
    filterQuestion() {
      this.isLoadingLeft = true
      var isType = this.queryQuestion.type !== "" && this.queryQuestion.type !== null;
      var isTitle =
        this.queryQuestion.titleDetail !== "" && this.queryQuestion.titleDetail !== null;
      var temp = this.allQuestions.filter((item) => {
        if (isType) {
          if (isTitle) {
            return (
              item.type === this.queryQuestion.type &&
              item.titleDetail.indexOf(this.queryQuestion.titleDetail) >= 0
            );
          }
          return item.type === this.queryQuestion.type;
        } else {
          if (isTitle) {
            return item.titleDetail.indexOf(this.queryQuestion.titleDetail) >= 0;
          }
        }
      });
      if (isType || isTitle) {
        this.filterQuestions = null;
        this.filterQuestions = temp;
      } else {
        this.filterQuestions = null;
        this.filterQuestions = JSON.parse(JSON.stringify(this.allQuestions));
      }
      this.isLoadingLeft = false;
    },
    //移动监听
    checkMove(ev){
      if (ev.from.id === 'todo') {
        this.$nextTick(()=>{
          this.isLoadingLeft = true
        })
      } else if (ev.from.id === "done") {
         this.$nextTick(()=>{
        this.isLoadingRight = true;
        })
      }
    },
    // 拖拽事件
    removeHandle(event) {
      if (event.from.id === "todo") {
        const item = this.checkedQuestions[event.newIndex];
        this.addQuestion(item);
        this.$message.success(
          `添加了一道 ${Constants.QuestionType.getLabelByValue(item.type)}`
        );
        this.$nextTick(()=>{
          _this.isLoadingLeft = false;
        })
      } else if (event.from.id === "done") {
        const item = this.filterQuestions[event.newIndex];
        this.removeQuestion(item);
         this.$message.warning(
          `移除了一道 ${Constants.QuestionType.getLabelByValue(item.type)}`
        );
        this.$nextTick(()=>{
          _this.isLoadingRight = false;
        })
      }
    },
    //增加题目
    addQuestion(item){
      this.checkedInfo.totalScore = this.checkedInfo.totalScore + item.score;
        if (item.type === "RADIO_QUESTION") {
          this.checkedInfo.totalRadio++;
          this.checkedInfo.radioScore = this.checkedInfo.radioScore + item.score;
        } else if (item.type === "MULTI_SELECT_QUESTION") {
          this.checkedInfo.totalMutil++;
          this.checkedInfo.mutilScore = this.checkedInfo.mutilScore + item.score;
        } else if (item.type === "TRUE_FALSE_QUESTION") {
          this.checkedInfo.totalTrue++;
          this.checkedInfo.trueScore = this.checkedInfo.trueScore + item.score;
        } else if (item.type === "SHORT_ANSWER_QUESTION") {
          this.checkedInfo.totalShort++;
          this.checkedInfo.shortScore = this.checkedInfo.shortScore + item.score;
        }
        var todel = this.allQuestions.filter((temp) => {
          return item.id === temp.id;
        });
        this.allQuestions.splice(this.allQuestions.indexOf(todel[0]), 1);
    },
    //移除题目
    removeQuestion(item){
      this.checkedInfo.totalScore = this.checkedInfo.totalScore - item.score;
        if (item.type === "RADIO_QUESTION") {
          this.checkedInfo.totalRadio--;
          this.checkedInfo.radioScore = this.checkedInfo.radioScore - item.score;
        } else if (item.type === "MULTI_SELECT_QUESTION") {
          this.checkedInfo.totalMutil--;
          this.checkedInfo.mutilScore = this.checkedInfo.mutilScore - item.score;
        } else if (item.type === "TRUE_FALSE_QUESTION") {
          this.checkedInfo.totalTrue--;
          this.checkedInfo.trueScore = this.checkedInfo.trueScore - item.score;
        } else if (item.type === "SHORT_ANSWER_QUESTION") {
          this.checkedInfo.totalShort--;
          this.checkedInfo.shortScore = this.checkedInfo.shortScore - item.score;
        }
        this.allQuestions.push(item);
    },
    // 图片列表初始化
    changeImgList(imgListStr) {
      var temp = JSON.parse(imgListStr);
      var imgList = temp.map((x) => {
        return x.url;
      });
      return imgList;
    },
    // 弹窗打开事件 -- 设置图片
    openPopover(id) {
      var imgs = document.getElementsByName("showImage-" + id);
      if (imgs !== null && imgs !== undefined) {
        imgs.forEach((element) => {
          const proportion = element.height / element.width;
          if (element.height > 150) {
            element.height = 150 + "px";
            element.width = 150 / proportion + "px";
            element.style.height = 150 + "px";
            element.style.width = 150 / proportion + "px";
          } else if (element.width > 196) {
            element.width = 196 + "px";
            element.height = 196 * proportion + "px";
            element.style.width = 196 + "px";
            element.style.height = 196 * proportion + "px";
          }
        });
      }
    },
    // 第一步表单检验
    checkFirst() {
      this.$refs.firstform.validate((valid) => {
        if (valid) {
          this.next();
        }
      });
    },
    // 第二步检验
    checkSecond() {
      if (this.checkedQuestions.length === 0) {
        this.$message.error("未选择题目！请在左侧选择题目。。。")
      } else{
        this.next();
      }
    },
    //检查选项是否是答案
    checkSelect(select, item) {
      if (item.type === "RADIO_QUESTION") {
        if (select === item.answer) {
          return true;
        } else {
          return false;
        }
      }
      if (item.type === "MULTI_SELECT_QUESTION") {
        var list = JSON.parse(item.answer);
        if (list.indexOf(select) !== -1) {
          return true;
        } else {
          return false;
        }
      }
    },
    //检查数据
    checkData() {
      // 二次确认
      this.$confirm("确认保存试卷吗？", "提示", {
        // type: "warning",
      })
        .then(() => {
          this.paper.totalScore = this.checkedInfo.totalScore
          let questionIds = this.checkedQuestions.map(item => {
            return item.id
          })
          this.paper.questionList = JSON.stringify(questionIds)
          this.$post('/paper/insertorupdate', this.paper).then(res => {
            if (res.code === 0) {
              this.reloadData();
              this.$message.success('保存成功！')
              this.$emit('closeAdd')
            } else {
              this.$message.error(res.msg)
            }
          })
        })
        .catch(() => {});
    },
    //预览试卷
    viewPaper(){
      this.showVisible = true;
    },
    // 重置页面数据
    reloadData(){
      Object.assign(this.$data, this.$options.data())
      this.$nextTick(()=>{
        _this.$refs.firstform.clearValidate()
      })
    },
    // 更改试卷数据初始化
    updateInit(){
      this.active = 0
      //题库数据初始化
      this.checkedQuestions.forEach(item =>{
        let todel = this.allQuestions.filter((temp) => {
          return item.id === temp.id;
        });
        if (todel.length > 0) {
          _this.addQuestion(todel[0])
        }
      })
      this.filterQuestions = JSON.parse(JSON.stringify(this.allQuestions))
    }
  },
  created() {
    _this = this;
  },
  computed: {},
  watch: {
    "queryQuestion.type": {
      handler(newName, oldName) {
        _this.filterQuestion();
      },
    },
    "paper.fkExamName": {
      handler(newval, oldval) {
        _this.getQuestion();
      },
    },
    'checkedQuestions': {
      handler(newval, oldval){
        if (_this.checkedQuestions.length > 0) {
          _this.isSelect = false;
        } else{
          _this.isSelect = true;
        }
      }
    }
  },
  mounted() {},
};
</script>
<style scoped>
.el-steps {
  height: 60px;
  width: 100%;
}
/deep/div.el-step__title {
  font-size: 12px;
}
/deep/.myhover:hover {
  cursor: pointer;
  color: #a6a8ac;
}
.drag-box {
  display: flex;
  user-select: none;
}
.drag-box-item {
  flex: 1;
  max-width: 511px;
  min-width: 300px;
  background-color: #eff1f5;
  margin: 0 7px;
  border-radius: 6px;
  border: 1px #e1e4e8 solid;
}
.item-title {
  padding: 8px 8px 8px 12px;
  font-size: 15px;
  line-height: 1.5;
  color: #24292e;
  font-weight: 600;
}
.item-ul {
  padding: 0 8px 8px;
  height: 500px;
  overflow-y: scroll;
}
.item-ul::-webkit-scrollbar {
  width: 0;
}
.drag-list {
  border: 1px #e1e4e8 solid;
  padding: 10px;
  margin: 5px 0 10px;
  list-style: none;
  background-color: #fff;
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: border 0.3s ease-in;
  transition: border 0.3s ease-in;
}
.drag-list:hover {
  border: 1px solid #20a0ff;
}
.drag-title {
  font-weight: 400;
  line-height: 25px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}
.ghost-style {
  display: block;
  color: transparent;
  border-style: dashed;
}
.scorespan {
  color: #8b89ff;
  background-color: #d4d3ff;
  margin: 0 3px;
}
.showinline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  word-break: break-all;
  overflow: hidden;
  max-width: 480px;
  margin-top: 2px;
}
.select_currect {
  background-color: #d4d3ff;
  margin: 6px 0px;
  padding: 0 3px;
  border-radius: 5px;
  background-color: #f0f9e6;
  color: #67c23a;
}
.select_error {
  background-color: #d4d3ff;
  margin: 6px 0px;
  padding: 0 3px;
  border-radius: 5px;
  background-color: #fef0f0;
  color: #f56c6c;
}
.quest_img {
  vertical-align: top;
  max-width: 196px;
  max-height: 150px;
  margin: 0 5px;
}
.tooltips {
  margin: 4px;
}
.third_label{
  display: inline-block;
  height: 17px;
  font-size:15px;
  margin:8px 5px 8px 0;
  vertical-align: middle;
}
.third_item{
  font-size:17px;
   display: inline-block;
  white-space: nowrap; /*强制单行显示*/
  text-overflow: ellipsis; /*超出部分省略号表示*/
  overflow: hidden; /*超出部分隐藏*/
  max-width: 362.5px;
  vertical-align: middle;
}
.third_tag{
  margin: 2px 2px 0 2px;
  padding: 0 3px ;
}
</style>
